<template>
	<div class="home-banner" v-if="banner.length>0">
    <swiper :options="swiperOption" class="sw">
      <swiper-slide v-for="(v,index) in banner" :key="index">
        <img :id="'shouye_lunbotu_'+v.id" :src="v.coverImagUrl+'?x-oss-process=image/resize,m_fixed,h_236,w_750'" @click="clickBannerImg(v.type,v.imagUrl,v.link,v.id)" />
      </swiper-slide>
      <div v-if="banner.length>1" class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  // import Name from '@/components/Name.vue';

  export default {
    components: {
      // Name
    },
    props: {},
		data() {
			return {
        banner: [],
        onlyChannel: this.$channel,
				swiperOption: {
					autoplay: {
						delay: 5000,
						stopOnLastSlide: false,
						disableOnInteraction: false,
					},
					pagination: {
						el: '.swiper-pagination',
					},
				}
			};
    },
    computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			}
    },
    created() {
			this.getBanner();
    },
    
    methods: {
			//获取banner
			getBanner() {
				this.$http
					.get("/h5live/getAdList")
					.then(res => {
						if(res.data.code == "000000") {
							this.banner = res.data.data;
						}
					})
					.catch(response => {

					});
			},
			dotNum(id) { //统计
				let _this = this;
				var argumentData = {
					sessionId: "homeBanner"+id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
      },
			//banner 跳转
			clickBannerImg(type, imgLink, urlLink, id) { //banner 的id
          this.dotNum(id)
          switch (type){
            case 1:
			this.$store.dispatch("dispatchBannerImgLink",imgLink)
			this.$router.push(`/${this.$channel}/bannerLink`);
           ;
              break;
            case 2:
				if(fun.getPlatform() == 'app' && this.$channel == 'zyzq'){
					fun.showTopNav(false,urlLink)
				}else{
                     window.location.href = urlLink
				}
              break;
            default:
              break;
          }
          
			}
		},
  }
</script>
<style scoped>
 	/* 头部 */
	
   .h-banner {
		width: 100%;
		height: 328px;
	}
	
	.cube-slide-item .h-banner-img img {
		width: 100%;
		height: 318px;
	}
	
	.h-ing-title {
		padding: 5px 30px 15px 30px;
		display: flex;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 3px 9px 1px rgba(204, 151, 152, 0.1);
		align-items: center;
	}
	
	.h-ing-title img {
		width: 70px;
		height: 70px;
	}
	
	.h-i-info {
		margin-left: 24px;
	}
	
	.info-name {
		font-size: 22px;
		/* margin-bottom: 12px;
  margin-top: 6px; */
		font-weight: bold;
	}
	
	.info-nowPageNum {
		font-size: 20px;
	}
	
	.h-banner .cube-slide-dots>span {
		margin: 0 2px;
		width: 28px;
		height: 3px;
	}
	
	.home-banner {
		position: relative;
	}
	
	.home-banner a {
		width: 100%;
		display: inline-block;
	}
	
	.home-banner img {
		width: 100%;
		height: 400px;
	}
	
	.sw {
		height: 400px;
	}
</style>
